<template>
    <div class="custom-dialog-dialog">
        <div class="alert-info">
            <div class="left">
                <div class="alert-item" v-for="(value, key, index) in data.info" :key="key">
                    <div style="width: 100%;height: 100%;display: flex;" v-if="(<any>key) !== '告警ID' && (<any>key) !== '告警父级'">
                        <div class="alert-title">{{ key }}：</div>
                        <div class="alert-title" v-if="(<any>key) == '告警等级'" :class="['grade', data.info['告警等级']]">{{
                    renderStatus(value)
                }}
                        </div>
                        <div class="alert-value" v-else>
                            {{ value }}
                        </div>
                    </div>

                </div>
            </div>
            <div class="right">
                <img :src="data.imgSrc" :alt="data.imgSrc">
            </div>
        </div>
        <div v-if="data.showSomeDetail" class="alert-someDetail">
            <div class="check">
                <div class="tag">
                    <el-tag>处理结果</el-tag>
                </div>
                <div class="check-box">
                    <el-radio-group v-model="radio">
                        <el-radio :label="'未处理'">未处理</el-radio>
                        <el-radio :label="'已处理'">已处理</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="text">
                <div class="text-title">
                    描述:
                </div>
                <textarea v-model="textarea" cols="30" rows="10"></textarea>
            </div>
        </div>
        <div v-if="data.bottomBtn" class="bottom-btn">
            <div class="btn">
                <el-button color="rgba(14, 72, 97, 1)" @click="closeDialog">取消</el-button>
            </div>
            <div class="btn">
                <el-button type="primary" @click="handle">确定</el-button>
            </div>
        </div>
        <div v-if="data.WorkerOrder" class="worker-order">
            <div class="worker-order-title">
                工单情况
            </div>
            <div class="desc">
                已自动发送工单
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { defineProps, PropType, toRefs, ref } from 'vue';
import { addDialog, closeDialog } from '../custom-dialog/index';
import emits from "@/utils/emits";
const radio = ref('未处理');
const textarea = ref('');
/**
 * @description 更改弹窗配置属性
 * @param info 弹窗信息
 * @param imgSrc 弹窗告警图片
 * @param showSomeDetail 是否展示处理框
 * @param bottomBtn 是否展示处理按钮
 * @param WorkerOrder 是否展示工单情况
 */
interface dataInfo {
    info: any,
    imgSrc: string,
    showSomeDetail: boolean,
    bottomBtn: boolean,
    WorkerOrder: boolean
};
const props = defineProps({
    data: {
        type: Object as PropType<dataInfo>,
        default: () => ({})
    }
});

const { data } = toRefs(props);

const renderStatus = (status) => {
    if (status == "ERROR") {
        return '紧急'
    }
    else if (status == "INFO") {
        return '普通'
    }
    else {
        return '告警'
    }
};

const handle = () => {
    emits.emit("TEST_HANDLE_MESSAGE", data.value.info);
    closeDialog()
};
</script>
<style lang="scss" scoped>
.custom-dialog-dialog {
    width: 100%;
    height: 100%;


    .alert-info {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: space-between;

        .left {

            width: 50%;
            height: 100%;


            .alert-item {
                display: flex;
                width: 100%;
                height: 30px;
                align-items: center;
                font-size: clamp(0.875rem, 0.73vw, 1.75rem);


                .alert-title {
                    color: #A8ABB2;
                    font-size: clamp(0.875rem, 0.73vw, 1.75rem);
                    font-weight: 600;
                }

                .alert-value {
                    color: #fff;
                    font-weight: 600;
                    font-size: clamp(0.875rem, 0.73vw, 1.75rem);
                }

                .grade {
                    width: 50px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;

                    &.INFO {
                        background-color: rgba(38, 190, 255, 0.4);
                        border: 1px solid rgb(38, 190, 255);

                        color: rgb(38, 190, 255);
                    }

                    &.ERROR {
                        border: 1px solid;
                        border-color: rgba(255, 63, 52, 1);
                        background-color: rgba(128, 32, 25, 0.40);
                        color: rgba(255, 63, 52, 1);
                    }

                    &.WARN {
                        border: 1px solid;
                        border-color: rgba(251, 197, 49, 1);
                        background-color: rgba(128, 100, 25, 0.40);
                        color: rgba(251, 197, 49, 1);
                    }
                }
            }
        }

        .right {
            width: 50%;
            height: 100%;

            img {
                width: 100%;
                height: 95%;
                display: block;
            }
        }
    }

    .alert-someDetail {
        width: 100%;
        height: auto;

        .check {
            width: 100%;
            display: flex;
            height: 20%;
            align-items: center;
            margin-bottom: 5px;
            font-weight: 600;

            .tag {
                margin-right: 10px;
            }

            :deep(.el-tag) {
                height: 30px;
            }
        }

        .text {
            width: 100%;
            height: 120px;

            .text-title {
                width: 100%;
                height: 20%;
                line-height: 20px;
                font-size: clamp(1rem, 0.83vw, 2rem);
                font-weight: 600;
            }

            textarea {
                width: 100%;
                height: 80%;
                border: none;
                background-color: transparent;
                resize: none;
                background: rgba(6, 16, 24, 0.68);
                border-radius: 2px 2px 2px 2px;
                opacity: 1;
                border: 1px solid #818181;
            }

        }
    }


    .bottom-btn {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        font-weight: 600;

        .btn {
            margin-right: 10px;
        }
    }


    .worker-order {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        color: #A8ABB2 !important;

        .worker-order-title {
            width: 120px;
            height: 40px;
            color: white;
            background-color: #2E426C;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            margin-right: 10px;
        }
    }

}
</style>